<template>
  <!--（vue-tree－🌲）-->
  <dl class="vue-tree" v-if="value">
    <dt @click="openOrClose" :class="{'leaf': !value.children||!value.children.length, 'closed': value.closed}"
        onselectstart="return false"></dt>
    <dd>{{value.name}}</dd>
    <dd onselectstart="return false">
      <i class="add" @click="addChild()" title="新增"></i>
      <i class="remove" @click="remove()" title="删除"></i>
      <i class="edit" @click="edit()" title="编辑"></i>
      <i class="up" title="上移"></i>
      <i class="down" title="下移"></i>
    </dd>
    <dd>
      <template v-for="(item , i) in value.children">
        <vue-tree v-model="value.children[i]" @delete="remove(i)"></vue-tree>
      </template>
    </dd>
  </dl>

</template>


<script>
  export default {
    name: "vueTree",
    props: {
      value: Object
    },
    data() {
      return {
        newValue: {}
      }
    },
    mounted() {
    },
    beforeUpdate() {
    },
    updated(){
      this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been re-rendered
        // alert(3)
      })
    },
    watch: {},
    methods: {
      addChild() {
        var node = this.value;
        if (!node.children) {
          node.children = [];
        }
        delete node.closed;
        var id = new Date().getTime();
        //var len = node.children.length;
        //node.children.splice(len, 0, {id: id, name: id})
        //this.$set(node.children, len, {id: id, name: id});
        node.children.push({id: id, name: id});
        this.$forceUpdate();
      },
      openOrClose() {
        this.value.closed = !this.value.closed
        this.$forceUpdate();
      },
      remove(i) {
        if (arguments.length > 0) {
          this.value.children.splice(i, 1)
          this.$forceUpdate();
        } else {
          this.$emit("delete")
        }
      },
      edit() {
        var _this=this;
        //this.$layer.confirm("确认吗", function () {
        //  _this.$layer.closeAll();
        //})
        // console.log(this.$layer)
        this.$layer.iframe({
          type: 1,
          title: '请输入名称',
          // area: ['1024px', 'auto'],
          content: {
            content: require('../layers/Prompt').default, //传递的组件对象
            parent: this,//当前的vue对象
            data:{
              value:[{tip:'名称', input:this.value.name},{tip:'地址', input:this.value.url}],
            }
          }
        });
      },
      promptSubmit(data){
        console.log(data)
      },
      promptCancel(data){
        console.log(data)
      },
      clearName() {
      }
    }
  }
</script>
<style scoped>
  dl.vue-tree,
  dl.vue-tree dt,
  dl.vue-tree dd,
  dl.vue-tree dd i {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
  }

  dl.vue-tree {
    position: relative;
    background: url("/static/img/line_conn.gif") 0 0 repeat-y;
    margin-top: -1px;
  }

  dl.vue-tree > dt {
    display: inline-block;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url("/static/img/zTreeStandard.png");
    background-position: -92px -36px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  dl.vue-tree > dt.leaf {
    background-position: -56px -18px;
    cursor: auto;
  }

  dl.vue-tree > dt.closed {
    background-position: -74px -36px;
    cursor: pointer;
  }

  dl.vue-tree > dt.closed + dd + dd + dd {
    display: none;
  }

  dl.vue-tree :last-child > dt.leaf {
    background-position: -56px -36px;
  }

  dl.vue-tree:last-child {
    background: none;
  }

  dl.vue-tree > dt + dd {
    display: inline-block;
    vertical-align: top;
    height: 20px;
    cursor: pointer;
  }

  dl.vue-tree > dt + dd + dd {
    display: inline-block;
    vertical-align: top;
    height: 20px;
    min-width: 20px;
    margin-left: -7px;
    padding-left: 10px
  }

  dl.vue-tree > dt + dd:hover + dd i {
    display: inline-block;
  }

  dl.vue-tree > dt + dd + dd:hover i {
    display: inline-block;
  }

  dl.vue-tree > dt + dd + dd i {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url(/static/img/zTreeStandard.png);
    display: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    cursor: pointer;
  }

  .add {
    background-position: -145px -1px;
  }

  .remove {
    background-position: -110px -66px;
  }

  .edit {
    background-position: -110px -49px;
  }

  .up {
    background-position: -109px -80px;
    transform: rotate(270deg);
  }

  .down {
    background-position: -109px -80px;
    transform: rotate(90deg);
  }

  dl.vue-tree dl.vue-tree {
    left: 23px;
  }
</style>
